function fn12() {
    function getUnit(str) {
        str += ""
        console.log(123, str);
        let num = parseFloat(str);
        let unit = str.slice((num + "").length)
        return [num, unit]
    }
    function animate(element, target, duration = 1000, onFinish) {
        const totalFrames = duration / 40
        let time = 0
        const elStyle = getComputedStyle(element)

        for (let key in target) {
            let [num, unit] = getUnit(target[key])
            let speed = (num - parseFloat(elStyle[key])) / totalFrames
            target[key] = [num, unit, speed];
        }

        let timer = setInterval(() => {
            for (let key in target) {
                let arr = target[key]
                element.style[key] = parseFloat(elStyle[key]) + arr[2] + arr[1]
            }

            time++
            if (time === totalFrames) {
                clearInterval(timer);
                for (let key in target) {
                    element.style[key] = target[key][0]
                }
            }
            onFinish && onFinish();
        }, 40)
    }

    document.querySelector('#box').onclick = function () {
        console.log(123, this);
        animate(
            this,
            { left: "300px", top: "400px", opacity: 0.5 },
            3000,
            () => {
                console.log("动画结束");
            }
        );
    };
}
fn12();